<!--<template>-->
<!--<div class='menu-gov part relative-position full-height page-content'>-->
<!--  <collapse class="collapse">-->
<!--    <template v-slot:content>-->
<!--      <q-form @submit="search" class="form-inline" style="width:100%">-->
<!--        <q-input outlined dense v-model="companyName" @input="getCompanyListname" debounce="500">-->
<!--          <template v-slot:before>-->
<!--            <span class="form-name">企业名称</span>-->
<!--          </template>-->
<!--          <q-menu v-model="showCompanyList" no-focus>-->
<!--            <q-list v-for="(item, index) in companyList" :key="index" style="min-width: 100px">-->
<!--              <q-item clickable v-close-popup @click="companyName=item">-->
<!--                <q-item-section>{{item}}</q-item-section>-->
<!--              </q-item>-->
<!--            </q-list>-->
<!--          </q-menu>-->
<!--        </q-input>-->
<!--        <q-btn color="primary" label="查询" type="submit" :disable="isEdit" class="margin-l-10" />-->
<!--        <span v-if="companyName.length === 0" class="text-red vertical-bottom margin-l-10">请输入企业名称进行查询</span>-->
<!--        <q-space></q-space>-->
<!--        <div class="vertical-bottom cur-company">-->
<!--          当前企业：<span class="cur-company-value">{{resultName}}</span>-->
<!--        </div>-->
<!--      </q-form>-->
<!--      <div class="toolbar">-->
<!--        &lt;!&ndash;  tab&ndash;&gt;-->
<!--        <q-toolbar>-->
<!--          <q-tabs-->
<!--            v-model="tab"-->
<!--            shrink stretch-->
<!--            inline-label-->
<!--            class="tab"-->
<!--            active-color="primary"-->
<!--            indicator-color="primary"-->
<!--            @input="changeTab"-->
<!--          >-->
<!--            <q-tab name="pc" icon="iconfont icontubiao-30" label="PC 端" />-->
<!--            <q-tab name="mobile" icon="iconfont icontubiao-1" label="手机端" />-->
<!--            <q-tab name="pad" icon="iconfont icontubiao-32" label="工位 Pad" />-->
<!--&lt;!&ndash;            <q-tab name="board" icon="iconfont icontubiao-31" label="现场看板" />&ndash;&gt;-->
<!--          </q-tabs>-->
<!--          <q-space></q-space>-->
<!--          <q-btn :label="isEdit?'保存':'修改'" color="primary" @click="editSave()" :disable="resultName.length === 0"-->
<!--                 :loading="saveLoading"></q-btn>-->
<!--        </q-toolbar>-->
<!--        <q-separator class="line"/>-->
<!--      </div>-->
<!--    </template>-->
<!--  </collapse>-->

<!--  &lt;!&ndash;    数据&ndash;&gt;-->
<!--  <q-tab-panels v-model="tab" :keep-alive="true">-->
<!--    <q-tab-panel name="pc">-->
<!--      <q-table-->
<!--        :data="dataPC" :columns="columns" :loading="pcLoading"-->
<!--        row-key="id" class="scroll myTable-line"-->
<!--        :pagination="{rowsPerPage: 0}" hide-bottom-->
<!--        no-data-label="暂无数据">-->
<!--        <template v-slot:body="props">-->
<!--          <transition name="fade">-->
<!--            <q-tr :props="props" v-show="props.row.show">-->
<!--              <q-td key="name" :props="props" :style="{'padding-left': props.row.level*16+14+'px'}">-->
<!--                <q-btn :class="{'invisible': props.row.childrenCount===0}"-->
<!--                       dense round flat-->
<!--                       :icon="props.row.expand ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'"-->
<!--                       @click="toggleChildren(props.row)" />-->
<!--                {{ props.row.name }}-->
<!--              </q-td>-->
<!--              <q-td key="icon" :props="props">-->
<!--                <q-icon v-if="tab==='pc'" :name="'iconfont '+props.row.icon" size="sm"></q-icon>-->
<!--                <q-icon v-if="tab==='mobile'" :name="'img:statics/img/phone/'+props.row.icon+'.png'" size="24px"></q-icon>-->
<!--              </q-td>-->
<!--              <q-td key="type" :props="props">{{ types[props.row.type].label }}</q-td>-->
<!--              <q-td key="parentName" :props="props">{{ props.row.parentId === -1 ? '/' : props.row.parentName}}</q-td>-->
<!--              <q-td key="url" :props="props">{{ props.row.url }}</q-td>-->
<!--              <q-td key="operate" :props="props">-->
<!--                <q-toggle v-model="idsPC[props.row.id]" :disable="!isEdit" />-->
<!--              </q-td>-->
<!--            </q-tr>-->
<!--          </transition>-->
<!--        </template>-->
<!--      </q-table>-->
<!--    </q-tab-panel>-->
<!--    <q-tab-panel name="mobile">-->
<!--      <q-table-->
<!--        :data="dataPhone" :columns="columns" :loading="phoneLoading"-->
<!--        row-key="id" class="scroll myTable-line"-->
<!--        :pagination="{rowsPerPage: 0}" hide-bottom-->
<!--        no-data-label="暂无数据">-->
<!--        <template v-slot:body="props">-->
<!--          <transition name="fade">-->
<!--            <q-tr :props="props" v-show="props.row.show">-->
<!--              <q-td key="name" :props="props" :style="{'padding-left': props.row.level*16+14+'px'}">-->
<!--                <q-btn :class="{'invisible': props.row.childrenCount===0}"-->
<!--                       dense round flat-->
<!--                       :icon="props.row.expand ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'"-->
<!--                       @click="toggleChildren(props.row)" />-->
<!--                {{ props.row.name }}-->
<!--              </q-td>-->
<!--              <q-td key="icon" :props="props">-->
<!--                <q-icon v-if="tab==='pc'" :name="'iconfont '+props.row.icon" size="sm"></q-icon>-->
<!--                <q-icon v-if="tab==='mobile'" :name="'img:statics/img/phone/'+props.row.icon+'.png'" size="24px"></q-icon>-->
<!--              </q-td>-->
<!--              <q-td key="type" :props="props">{{ types[props.row.type].label }}</q-td>-->
<!--              <q-td key="parentName" :props="props">{{ props.row.parentId === -1 ? '/' : props.row.parentName}}</q-td>-->
<!--              <q-td key="url" :props="props">{{ props.row.url }}</q-td>-->
<!--              <q-td key="operate" :props="props">-->
<!--                <q-toggle v-model="idsPhone[props.row.id]" :disable="!isEdit" />-->
<!--              </q-td>-->
<!--            </q-tr>-->
<!--          </transition>-->
<!--        </template>-->
<!--      </q-table>-->
<!--    </q-tab-panel>-->
<!--    <q-tab-panel name="pad">-->
<!--      <q-table-->
<!--        :data="dataPad" :columns="columns" :loading="padLoading"-->
<!--        row-key="id" class="scroll myTable-line"-->
<!--        :pagination="{rowsPerPage: 0}" hide-bottom-->
<!--        no-data-label="暂无数据">-->
<!--        <template v-slot:body="props">-->
<!--          <transition name="fade">-->
<!--            <q-tr :props="props" v-show="props.row.show">-->
<!--              <q-td key="name" :props="props" :style="{'padding-left': props.row.level*16+14+'px'}">-->
<!--                <q-btn :class="{'invisible': props.row.childrenCount===0}"-->
<!--                       dense round flat-->
<!--                       :icon="props.row.expand ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'"-->
<!--                       @click="toggleChildren(props.row)" />-->
<!--                {{ props.row.name }}-->
<!--              </q-td>-->
<!--              <q-td key="icon" :props="props">-->
<!--                <q-icon :name="'iconfont '+props.row.icon" size="sm"></q-icon>-->
<!--              </q-td>-->
<!--              <q-td key="type" :props="props">{{ types[props.row.type].label }}</q-td>-->
<!--              <q-td key="parentName" :props="props">{{ props.row.parentId === -1 ? '/' : props.row.parentName}}</q-td>-->
<!--              <q-td key="url" :props="props">{{ props.row.url }}</q-td>-->
<!--              <q-td key="operate" :props="props">-->
<!--                <q-toggle v-model="idsPad[props.row.id]" :disable="!isEdit" />-->
<!--              </q-td>-->
<!--            </q-tr>-->
<!--          </transition>-->
<!--        </template>-->
<!--      </q-table>-->
<!--    </q-tab-panel>-->
<!--&lt;!&ndash;    <q-tab-panel name="board">&ndash;&gt;-->
<!--&lt;!&ndash;      <q-table&ndash;&gt;-->
<!--&lt;!&ndash;        :data="dataBoard" :columns="columns" :loading="boardLoading"&ndash;&gt;-->
<!--&lt;!&ndash;        row-key="id" class="scroll myTable-line"&ndash;&gt;-->
<!--&lt;!&ndash;        :pagination="{rowsPerPage: 0}" hide-bottom&ndash;&gt;-->
<!--&lt;!&ndash;        no-data-label="暂无数据">&ndash;&gt;-->
<!--&lt;!&ndash;        <template v-slot:body="props">&ndash;&gt;-->
<!--&lt;!&ndash;          <transition name="fade">&ndash;&gt;-->
<!--&lt;!&ndash;            <q-tr :props="props" v-show="props.row.show">&ndash;&gt;-->
<!--&lt;!&ndash;              <q-td key="name" :props="props" :style="{'padding-left': props.row.level*16+14+'px'}">&ndash;&gt;-->
<!--&lt;!&ndash;                <q-btn :class="{'invisible': props.row.childrenCount===0}"&ndash;&gt;-->
<!--&lt;!&ndash;                       dense round flat&ndash;&gt;-->
<!--&lt;!&ndash;                       :icon="props.row.expand ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'"&ndash;&gt;-->
<!--&lt;!&ndash;                       @click="toggleChildren(props.row)" />&ndash;&gt;-->
<!--&lt;!&ndash;                {{ props.row.name }}&ndash;&gt;-->
<!--&lt;!&ndash;              </q-td>&ndash;&gt;-->
<!--&lt;!&ndash;              <q-td key="icon" :props="props">&ndash;&gt;-->
<!--&lt;!&ndash;                <q-icon :name="'iconfont '+props.row.icon" size="sm"></q-icon>&ndash;&gt;-->
<!--&lt;!&ndash;              </q-td>&ndash;&gt;-->
<!--&lt;!&ndash;              <q-td key="type" :props="props">{{ types[props.row.type].label }}</q-td>&ndash;&gt;-->
<!--&lt;!&ndash;              <q-td key="parentName" :props="props">{{ props.row.parentId === -1 ? '/' : props.row.parentName}}</q-td>&ndash;&gt;-->
<!--&lt;!&ndash;              <q-td key="url" :props="props">{{ props.row.url }}</q-td>&ndash;&gt;-->
<!--&lt;!&ndash;              <q-td key="operate" :props="props">&ndash;&gt;-->
<!--&lt;!&ndash;                <q-toggle v-model="idsBoard[props.row.id]" :disable="!isEdit" />&ndash;&gt;-->
<!--&lt;!&ndash;              </q-td>&ndash;&gt;-->
<!--&lt;!&ndash;            </q-tr>&ndash;&gt;-->
<!--&lt;!&ndash;          </transition>&ndash;&gt;-->
<!--&lt;!&ndash;        </template>&ndash;&gt;-->
<!--&lt;!&ndash;      </q-table>&ndash;&gt;-->
<!--&lt;!&ndash;    </q-tab-panel>&ndash;&gt;-->
<!--  </q-tab-panels>-->
<!--</div>-->
<!--</template>-->

<!--<script>-->
<!--import Collapse from 'src/components/collapse'-->
<!--import { getMenu } from 'src/boot/bms/base-menu'-->
<!--import { getCompany, getCompanyMenu, saveCompanySatus } from 'src/boot/bms/menu-gov'-->
<!--export default {-->
<!--  data () {-->
<!--    return {-->
<!--      tab: 'pc',-->
<!--      isEdit: false, // 保存修改状态-->
<!--      saveLoading: false, // 保存加载中-->
<!--      // 搜索条件-->
<!--      companyName: '', // 企业名称-->
<!--      resultName: '', // 缓存查询结果的企业名称-->
<!--      companyList: [], // 模糊查询公司名称的结果-->
<!--      showCompanyList: true, // 是否显示模糊查询公司名称结果-->
<!--      // 列表头部-->
<!--      columns: [-->
<!--        { name: 'name', align: 'left', label: '名称', field: 'calories' },-->
<!--        { name: 'icon', align: 'left', label: '图标', field: 'fat' },-->
<!--        { name: 'type', align: 'center', label: '类型', field: 'carbs' },-->
<!--        { name: 'parentName', align: 'center', label: '上级菜单', field: 'protein' },-->
<!--        { name: 'operate', align: 'center', label: '显示', field: 'sodium' }-->
<!--      ],-->
<!--      // 表格数据-->
<!--      dataPC: [], // PC端列表数据-->
<!--      dataPhone: [], // 手机端列表数据-->
<!--      dataPad: [], // 工位PAD列表数据-->
<!--      dataBoard: [], // 现场看板列表数据-->
<!--      // 选中id数据-->
<!--      idsPC: {}, // PC选中的数据-->
<!--      idsPhone: {}, // Phone选中的数据-->
<!--      idsPad: {}, // Pad选中的数据-->
<!--      idsBoard: {}, // Board选中的数据-->
<!--      // 表格加载-->
<!--      pcLoading: false,-->
<!--      phoneLoading: false,-->
<!--      padLoading: false,-->
<!--      boardLoading: false,-->
<!--      // 菜单类型-->
<!--      // 菜单类型-->
<!--      types: [-->
<!--        { label: '目录', value: 0 },-->
<!--        { label: '菜单', value: 1 },-->
<!--        { label: '按钮', value: 2 }-->
<!--      ]-->
<!--    }-->
<!--  },-->
<!--  created () {-->
<!--    this.getMenuList()-->
<!--  },-->
<!--  methods: {-->
<!--    // 切换tab-->
<!--    changeTab (value) {-->
<!--      this.tab = value-->
<!--      this.getMenuList()-->
<!--    },-->
<!--    // 获取数据列表-->
<!--    getMenuList () {-->
<!--      this.loading = true-->
<!--      this.setLoading(true)-->
<!--      getMenu({ terminalType: this.tab }).then(res => {-->
<!--        this.setLoading(false)-->
<!--        switch (this.tab) {-->
<!--          case 'pc':-->
<!--            this.dataPC = this.initInfo(res.data)-->
<!--            break-->
<!--          case 'mobile':-->
<!--            this.dataPhone = this.initInfo(res.data)-->
<!--            break-->
<!--          case 'pad':-->
<!--            this.dataPad = this.initInfo(res.data)-->
<!--            break-->
<!--          case 'board':-->
<!--            this.dataBoard = this.initInfo(res.data)-->
<!--            break-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    // 给数据添加show、expand、isFirst、isLast、 index属性-->
<!--    initInfo (data) {-->
<!--      const curData = this.getCurData()-->
<!--      let info-->
<!--      if (curData.length === 0) {-->
<!--        info = data.map((item, index) => {-->
<!--          return {-->
<!--            ...item,-->
<!--            show: item.level === 0,-->
<!--            expand: false,-->
<!--            index: index,-->
<!--            parentId: item.parentId + '',-->
<!--            id: item.id + ''-->
<!--          }-->
<!--        })-->
<!--      } else {-->
<!--        info = data.map((item, index) => {-->
<!--          let tableItem = curData.find(f => {-->
<!--            return Number(f.id) === Number(item.id)-->
<!--          })-->
<!--          let parent = curData.find(child => child.id === item.parentId)-->
<!--          return {-->
<!--            ...item,-->
<!--            show: tableItem ? tableItem.show : parent ? parent.expand : item.level === 0,-->
<!--            expand: tableItem ? tableItem.expand : false,-->
<!--            index: index,-->
<!--            parentId: item.parentId + '',-->
<!--            id: item.id + ''-->
<!--          }-->
<!--        })-->
<!--      }-->
<!--      return info-->
<!--    },-->
<!--    // 显示隐藏子集-->
<!--    toggleChildren (item) {-->
<!--      item.expand = !item.expand-->
<!--      let children-->
<!--      if (item.expand) {-->
<!--        children = this.findOneChild(item.id)-->
<!--      } else {-->
<!--        children = this.findChild(item.id)-->
<!--      }-->
<!--      const ids = children.map(item => {-->
<!--        return item.id-->
<!--      })-->
<!--      const data = this.getCurData()-->
<!--      data.forEach(i => {-->
<!--        if (ids.includes(i.id)) {-->
<!--          i.show = item.expand-->
<!--          // i.expand = item.expand-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    // 找到下面一级的子集id-->
<!--    findOneChild (id) {-->
<!--      const data = this.getCurData()-->
<!--      let children = data.filter((item) => {-->
<!--        return item.parentId === id-->
<!--      })-->
<!--      let child = this.findExpandChild(children)-->
<!--      children = children.concat(child)-->
<!--      return children-->
<!--    },-->
<!--    // 找到展开的子级-->
<!--    findExpandChild (arr) {-->
<!--      let result = []-->
<!--      arr.forEach(item => {-->
<!--        if (item.expand) {-->
<!--          let child = this.findOneChild(item.id)-->
<!--          result = result.concat(child)-->
<!--        }-->
<!--      })-->
<!--      return result-->
<!--    },-->
<!--    // 找到下面的所有子集id-->
<!--    findChild (id) {-->
<!--      const data = this.getCurData()-->
<!--      let child = data.filter((item) => {-->
<!--        return item.parentId === id-->
<!--      })-->
<!--      child.forEach(item => {-->
<!--        if (item.childrenCount > 0) {-->
<!--          const newArr = this.findChild(item.id)-->
<!--          child = child.concat(newArr)-->
<!--        }-->
<!--      })-->
<!--      return child-->
<!--    },-->
<!--    // 搜索-->
<!--    search () {-->
<!--      if (this.companyName.length === 0) {-->
<!--        this.$q.dialog({-->
<!--          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>请输入企业名称！</p>`,-->
<!--          html: true,-->
<!--          ok: {-->
<!--            unelevated: true,-->
<!--            label: '确认'-->
<!--          }-->
<!--        })-->
<!--        return false-->
<!--      }-->
<!--      this.getSelectInfo()-->
<!--    },-->
<!--    // 获取选中的数据id-->
<!--    getSelectInfo () {-->
<!--      const info = {-->
<!--        name: this.companyName,-->
<!--        terminalType: this.tab-->
<!--      }-->
<!--      this.setLoading(true)-->
<!--      getCompanyMenu(info).then((res) => {-->
<!--        this.resultName = this.companyName-->
<!--        console.log(res)-->
<!--        this.setIds(res.data)-->
<!--      }).finally(() => {-->
<!--        this.setLoading(false)-->
<!--      })-->
<!--    },-->
<!--    // 快速查询-->
<!--    // 查询企业名称-->
<!--    getCompanyListname (value) {-->
<!--      if (value.length > 0) {-->
<!--        getCompany({ search: value }).then(res => {-->
<!--          this.companyList = res.data-->
<!--          this.showCompanyList = true-->
<!--        })-->
<!--      }-->
<!--    },-->
<!--    // 修改和报错操作-->
<!--    editSave () {-->
<!--      if (this.isEdit) {-->
<!--        // 判断是否进行了企业查询-->
<!--        if (!this.hasSearchCompany()) {-->
<!--          return false-->
<!--        }-->
<!--        this.saveLoading = true-->
<!--        // 设置参数-->
<!--        const info = {-->
<!--          name: this.resultName-->
<!--        }-->
<!--        switch (this.tab) {-->
<!--          case 'pc':-->
<!--            info.ids = JSON.stringify(this.idsPC)-->
<!--            break-->
<!--          case 'mobile':-->
<!--            info.ids = JSON.stringify(this.idsPhone)-->
<!--            break-->
<!--          case 'pad':-->
<!--            info.ids = JSON.stringify(this.idsPad)-->
<!--            break-->
<!--          case 'board':-->
<!--            info.ids = JSON.stringify(this.idsBoard)-->
<!--            break-->
<!--        }-->
<!--        saveCompanySatus(info).then(res => {-->
<!--          this.$q.dialog({-->
<!--            title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-53" ></i> 保存成功！</p>`,-->
<!--            html: true,-->
<!--            ok: {-->
<!--              unelevated: true,-->
<!--              label: '确认'-->
<!--            }-->
<!--          })-->
<!--          this.isEdit = false-->
<!--          this.getSelectInfo()-->
<!--        }).finally(() => {-->
<!--          this.saveLoading = false-->
<!--        })-->
<!--      } else {-->
<!--        if (!this.hasSearchCompany()) {-->
<!--          return false-->
<!--        }-->
<!--        this.isEdit = true-->
<!--      }-->
<!--    },-->
<!--    // 判断是否进行了企业查询-->
<!--    hasSearchCompany () {-->
<!--      if (this.resultName.length === 0) {-->
<!--        this.$q.dialog({-->
<!--          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>请先进行企业查询！</p>`,-->
<!--          html: true,-->
<!--          ok: {-->
<!--            unelevated: true,-->
<!--            label: '确认'-->
<!--          }-->
<!--        })-->
<!--        return false-->
<!--      }-->
<!--      return true-->
<!--    },-->
<!--    // 获取当前操作数据-->
<!--    getCurData () {-->
<!--      let data-->
<!--      switch (this.tab) {-->
<!--        case 'pc':-->
<!--          data = this.dataPC-->
<!--          break-->
<!--        case 'mobile':-->
<!--          data = this.dataPhone-->
<!--          break-->
<!--        case 'pad':-->
<!--          data = this.dataPad-->
<!--          break-->
<!--        case 'board':-->
<!--          data = this.dataBoard-->
<!--          break-->
<!--      }-->
<!--      return data-->
<!--    },-->
<!--    setData (value) {-->
<!--      switch (this.tab) {-->
<!--        case 'pc':-->
<!--          this.dataPC = value-->
<!--          break-->
<!--        case 'mobile':-->
<!--          this.dataPhone = value-->
<!--          break-->
<!--        case 'pad':-->
<!--          this.dataPad = value-->
<!--          break-->
<!--        case 'board':-->
<!--          this.dataBoard = value-->
<!--          break-->
<!--      }-->
<!--    },-->
<!--    // 设置ids的值-->
<!--    setIds (ids) {-->
<!--      switch (this.tab) {-->
<!--        case 'pc':-->
<!--          this.idsPC = ids-->
<!--          break-->
<!--        case 'mobile':-->
<!--          this.idsPhone = ids-->
<!--          break-->
<!--        case 'pad':-->
<!--          this.idsPad = ids-->
<!--          break-->
<!--        case 'board':-->
<!--          this.idsBoard = ids-->
<!--          break-->
<!--      }-->
<!--    },-->
<!--    setLoading (value) {-->
<!--      switch (this.tab) {-->
<!--        case 'pc':-->
<!--          this.pcLoading = value-->
<!--          break-->
<!--        case 'mobile':-->
<!--          this.phoneLoading = value-->
<!--          break-->
<!--        case 'pad':-->
<!--          this.padLoading = value-->
<!--          break-->
<!--        case 'board':-->
<!--          this.boardLoading = value-->
<!--          break-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  components: {-->
<!--    Collapse-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped lang='stylus'>-->
<!--.part{-->
<!--  padding-top 0-->
<!--}-->
<!--.menu-gov{-->
<!--  padding-top 0-->
<!--  .form-inline{-->
<!--    padding-top 10px-->
<!--  }-->
<!--  .toolbar{-->
<!--    padding 0 20px 0px-->
<!--    .q-toolbar{-->
<!--      padding 0-->
<!--    }-->
<!--  }-->
<!--  .myTable-line{-->
<!--    margin-top 20px;-->
<!--  }-->
<!--}-->
<!--.form-inline{-->
<!--  line-height 32px;-->
<!--}-->
<!--</style>-->
<!--<style lang='stylus'>-->
<!--  .menu-gov{-->
<!--    .q-tab-panel{-->
<!--      padding 0 20px-->
<!--      flex 1-->
<!--      display flex-->
<!--      overflow hidden-->
<!--    }-->
<!--    .myTable-line{-->
<!--      margin 20px 0 0;-->
<!--      flex 1-->
<!--      .q-table__middle{-->
<!--        max-height 100%-->
<!--        // max-height calc(100vh - 388px);-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</style>-->
<template>
  <div class='base-menu'>
    <unfold>
      <template v-slot:tree-list>
        <div class="left box full-height">
          <!-- header -->
          <div class="box-header bg-primary text-white text-weight-regular">
            <q-icon name="iconfont icontubiao-57" color="white" class="q-mr-sm" />
            <span class="head-title vertical-middle user-select-none">企业</span>
            <q-space></q-space>
            <q-input color="teal" outlined dense bg-color="white" v-model="companyName"
                     style="width: 140px;" @keyup.enter="getCompanyList">
              <template v-slot:append>
                <q-btn @click="getCompanyList" flat round dense icon="iconfont icontubiao-21" size="11px" style="margin-right:-10px"></q-btn>
              </template>
            </q-input>
          </div>

          <!-- 列表 -->
          <q-scroll-area class="box-content bg-white" :thumb-style="CommonConfig.thumbStyle">
            <q-list style="min-width: 100px;">
              <div v-for="company in companyList" :key="company.id">
                <q-item
                  class="role-item"
                  :active="selectedCompany.id === company.id"
                  active-class="activated"
                  @click="onCompanyClick(company)"
                  clickable
                  v-ripple
                >
                  <q-item-section>{{ company.name }}</q-item-section>
                </q-item>
                <q-separator />
              </div>
            </q-list>
          </q-scroll-area>
        </div>
      </template>
      <template v-slot:content>
        <div class="right box">
          <div class="relative-position full-height box-content">
            <q-toolbar class="tab">
              <q-tabs v-model="tab"
                      shrink stretch dense
                      inline-label
                      align="left" @input="changeTab"
                      active-color="primary"
                      indicator-color="primary"
              >
                <q-tab name="pc" icon="iconfont icontubiao-30" label="PC 端" />
                <q-tab name="mobile" icon="iconfont icontubiao-1" label="手机端" />
<!--                <q-tab name="pad" icon="iconfont icontubiao-32" label="工位 Pad" />-->
                <!--      <q-tab name="board" icon="iconfont icontubiao-31" label="现场看板" />-->
              </q-tabs>
              <q-space></q-space>
              <q-btn
                style="width: 96px; min-height: 32px; font-size: 16px; padding: 0 16px" class="btn"
                :label="isEdit?'保存':'修改'" color="primary" @click="save()" :loading="saveLoading" />
            </q-toolbar>
            <q-separator class="line"/>
            <q-tab-panels class="tab-panel" v-model="tab" :keep-alive="true">
              <q-tab-panel name="pc">
                <q-table
                  :data="dataPC" :columns="columns" :loading="pcLoading"
                  row-key="value" class="scroll myTable-line"
                  hide-bottom :pagination="{rowsPerPage: 0}"
                  no-data-label="暂无数据">
                  <template v-slot:body="props">
                    <transition name="fade">
                      <q-tr :props="props" v-show="props.row.show">
                        <q-td key="name" :props="props" :style="{'padding-left': props.row.level*16+14+'px', 'width': '30%'}">
                          <q-btn :class="{'invisible': props.row.childrenCount===0}"
                                 dense round flat
                                 :icon="props.row.expand ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'"
                                 @click="toggleChildren(props.row)" />
                          {{ props.row.desc }}
                        </q-td>
                        <q-td key="type" :props="props">{{ type[props.row.type] }}</q-td>
                        <q-td key="parentName" :props="props">{{ props.row.parentName }}</q-td>
                        <q-td key="operate" :props="props" style="width: 100px">
                          <q-toggle @input="changeToggle(props.row, $event)" v-model="idsPC[props.row.value]" :disable="!isEdit" />
                        </q-td>
                      </q-tr>
                    </transition>
                  </template>
                </q-table>
              </q-tab-panel>
              <q-tab-panel name="mobile">
                <q-table
                  :data="dataPhone" :columns="columns" :loading="phoneLoading"
                  row-key="value" class="scroll myTable-line"
                  hide-bottom :pagination="{rowsPerPage: 0}"
                  no-data-label="暂无数据">
                  <template v-slot:body="props">
                    <transition name="fade">
                      <q-tr :props="props" v-show="props.row.show">
                        <q-td key="name" :props="props" :style="{'padding-left': props.row.level*16+14+'px', 'width': '30%'}">
                          <q-btn :class="{'invisible': props.row.childrenCount===0}"
                                 dense round flat
                                 :icon="props.row.expand ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'"
                                 @click="toggleChildren(props.row)" />
                          {{ props.row.desc }}
                        </q-td>
                        <q-td key="type" :props="props">{{ type[props.row.type]}}</q-td>
                        <q-td key="parentName" :props="props">{{ props.row.parentName }}</q-td>
                        <q-td key="operate" :props="props" style="width: 100px">
                          <q-toggle @input="changeToggle(props.row, $event)" v-model="idsPhone[props.row.value]" :disable="!isEdit" />
                        </q-td>
                      </q-tr>
                    </transition>
                  </template>
                </q-table>
              </q-tab-panel>
              <q-tab-panel name="pad">
                <q-table
                  :data="dataPad" :columns="columns" :loading="padLoading"
                  row-key="value" class="scroll myTable-line"
                  hide-bottom :pagination="{rowsPerPage: 0}"
                  no-data-label="暂无数据">
                  <template v-slot:body="props">
                    <transition name="fade">
                      <q-tr :props="props" v-show="props.row.show">
                        <q-td key="name" :props="props" :style="{'padding-left': props.row.level*16+14+'px', 'width': '30%'}">
                          <q-btn :class="{'invisible': props.row.childrenCount===0}"
                                 dense round flat
                                 :icon="props.row.expand ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'"
                                 @click="toggleChildren(props.row)" />
                          {{ props.row.desc }}
                        </q-td>
                        <q-td key="type" :props="props">{{ type[props.row.type] }}</q-td>
                        <q-td key="parentName" :props="props">{{ props.row.parentName }}</q-td>
                        <q-td key="operate" :props="props" style="width: 100px">
                          <q-toggle @input="changeToggle(props.row, $event)" v-model="idsPad[props.row.value]" :disable="!isEdit" />
                        </q-td>
                      </q-tr>
                    </transition>
                  </template>
                </q-table>
              </q-tab-panel>
            </q-tab-panels>
          </div>
        </div>
      </template>
    </unfold>
  </div>
</template>

<script>
import Unfold from 'src/components/unfold'
import { getCompany } from '../../boot/bms/box-gov'
import { getCompanyMenuId, saveCompanyMenuId, saveCompanyBusinessIds } from '../../boot/bms/menu-gov'
import refreshMixin from '../../assets/js/refresh-mixin'

export default {
  name: 'menu-gov',
  mixins: [refreshMixin],
  data () {
    return {
      companyName: '', // 企业搜索值
      // 公司
      companyList: [],
      // 选择的企业
      selectedCompany: {
        id: null,
        name: null
      },
      tab: 'pc', // pc|mobile|pad|board
      // 表格数据
      data: [], // PC端列表数据
      dataPC: [], // PC端列表数据
      dataPhone: [], // 手机端列表数据
      dataPad: [], // 工位PAD列表数据
      dataBoard: [], // 现场看板列表数据
      // 表格加载
      pcLoading: false,
      phoneLoading: false,
      padLoading: false,
      boardLoading: false,
      // 选中id数据
      idsPC: {}, // PC选中的数据
      idsPhone: {}, // Phone选中的数据
      idsPad: {}, // Pad选中的数据
      idsBoard: {}, // Board选中的数据
      // 列表头部
      columns: [
        { name: 'name', align: 'left', label: '名称', field: 'sodium' },
        { name: 'type', align: 'center', label: '类型', field: 'carbs' },
        { name: 'parentName', align: 'center', label: '上级菜单', field: 'protein' },
        { name: 'operate', align: 'center', label: '权限', field: 'sodium' }
      ],
      isEdit: false, // 是否编辑状态
      saveLoading: false, // 保存中
      // 菜单类型
      types: [
        { label: '目录', value: 0 },
        { label: '菜单', value: 1 },
        { label: '按钮', value: 2 }
      ],
      type: {
        'MENU_LEVEL_ONE': '目录',
        'PAGE': '菜单',
        'BUTTON': '按钮'
      }
    }
  },
  created () {
    this.getMenuList()
    this.getCompanyList()
  },
  methods: {
    /**
     * 全局刷新数据
     * author: xueli
     */
    refreshInfo () {
      this.companyName = ''
      this.isEdit = false
      this.getMenuList()
      this.getCompanyList()
    },
    // 获取企业列表
    getCompanyList () {
      let info = {
        name: this.companyName
      }
      // 获取企业列表
      getCompany(info).then((res) => {
        this.companyList = res.data
        if (this.companyList.length > 0) {
          this.selectedCompany = {
            id: this.companyList[0].id,
            name: this.companyList[0].name
          }
          this.getCompanyMenu()
        }
      })
    },
    // 获取企业菜单id
    getCompanyMenu () {
      let params = {
        clientType: this.tab
      }
      this.setLoading(true)
      getCompanyMenuId(params, this.selectedCompany.id).then(res => {
        console.log(res)
        let ids = this.getIds()
        let data = this.getCurData()
        data.forEach(item => {
          ids[item.value] = res.data.indexOf(item.value) > -1
        })
      }).finally(() => {
        this.setLoading(false)
      })
    },
    // 切换企业
    onCompanyClick (company) {
      this.selectedCompany.id = company.id
      this.selectedCompany.name = company.name
      this.getCompanyMenu()
    },
    // 切换tab
    changeTab (value) {
      this.tab = value
      this.isEdit = false
      this.getMenuList()
      this.getCompanyMenu()
    },
    // 获取菜单数据列表
    getMenuList () {
      let menuList
      switch (this.tab) {
        case 'pc':
          menuList = Object.entries(this.Enums.SYS_PERMISSION)
            .filter(entry => (entry[1].type === 'PAGE' || entry[1].type === 'MENU_LEVEL_ONE'))
            .map(item => item[1])
          break
        case 'mobile':
          menuList = Object.entries(this.Enums.SYS_PERMISSIONS_MOBILE)
            .filter(entry => entry[1].level === 0)
            .map(item => item[1])
          break
        case 'pad':
          menuList = []
          break
        case 'board':
          menuList = []
          break
      }
      this.setData(this.initInfo(menuList))
    },
    // 给数据添加show、expand、isFirst、isLast、 index属性
    initInfo (data) {
      const curData = this.getCurData()
      let info, ids = {}
      if (curData.length === 0) {
        info = data.map((item, index) => {
          // 找寻子级数量
          let children
          if (item.parentId === null) {
            children = data.filter(child => child.parentId === item.value)
          }
          ids[item.value] = false
          return {
            ...item,
            show: true,
            expand: true,
            index,
            childrenCount: item.parentId === null ? children.length : 0
          }
        })
      } else {
        info = data.map((item, index) => {
          let tableItem = curData.find(f => {
            return Number(f.value) === Number(item.value)
          })
          // 找寻子级数量
          let children
          if (item.parentId === null) {
            children = data.filter(child => child.parentId === item.value)
          }
          ids[item.value] = false
          return {
            ...item,
            show: tableItem ? tableItem.show : true,
            expand: tableItem ? tableItem.expand : true,
            index,
            childrenCount: item.parentId === null ? children.length : 0
          }
        })
      }
      this.setIds(ids)
      return info
    },
    // 找最后一个
    findLast (lastParentId, data) {
      let lastItem = data.find(item => {
        return item.value + '' === lastParentId + ''
      })
      let lastIds = [lastItem.value]
      if (lastItem.parentId + '' !== '0') {
        let lastItem2 = this.findLast(lastItem.parentId, data)
        lastIds.push(...lastItem2)
      }
      return lastIds
    },
    // 显示隐藏子集
    toggleChildren (item) {
      item.expand = !item.expand
      let children
      if (item.expand) {
        children = this.findOneChild(item.value)
      } else {
        children = this.findChild(item.value)
      }
      const ids = children.map(item => {
        return item.value
      })
      const data = this.getCurData()
      data.forEach(i => {
        if (ids.includes(i.value)) {
          i.show = item.expand
          // i.expand = item.expand
        }
      })
    },
    // 找到下面一级的子集id
    findOneChild (id) {
      const data = this.getCurData()
      let children = data.filter((item) => {
        return item.parentId === id
      })
      let child = this.findExpandChild(children)
      children = children.concat(child)
      return children
    },
    // 找到展开的子级
    findExpandChild (arr) {
      let result = []
      arr.forEach(item => {
        if (item.expand) {
          let child = this.findOneChild(item.value)
          result = result.concat(child)
        }
      })
      return result
    },
    // 找到下面的所有子集id
    findChild (id) {
      const data = this.getCurData()
      let child = data.filter((item) => {
        return item.parentId === id
      })
      console.log(data)
      child.forEach(item => {
        if (item.childrenCount > 0) {
          const newArr = this.findChild(item.value)
          child = child.concat(newArr)
        }
      })
      return child
    },
    // 找到下面的所有子集id
    findChild1 (id, data) {
      let child = data.filter((item) => {
        return item.parentId === id
      })
      console.log(child)
      child.forEach(item => {
        if (item.childrenCount > 0) {
          const newArr = this.findChild1(item.value, data)
          child = child.concat(newArr)
        }
      })
      return child
    },
    // 保存
    save () {
      if (!this.isEdit) {
        this.isEdit = true
      } else {
        let menulist = Object.entries(this.Enums.SYS_PERMISSION)
          .map(item => item[1])
        let idArr = this.getSubmitData(menulist)

        // 获取租户对应的业务权限id
        let businessIds = this.getBusinessPermissionIds(idArr)

        let params = {
          clientType: this.tab,
          privileges: idArr
        }
        this.saveLoading = true

        // 保存租户业务权限的promise
        let promiseSaveBusinessIds = saveCompanyBusinessIds(this.tab, businessIds, this.selectedCompany.id)

        // 保存租户菜单权限的promise
        let promiseSaveCompanyMenuIds = saveCompanyMenuId(params, this.selectedCompany.id)

        // 两个promise均成功后刷新数据，关闭loading
        Promise.all([promiseSaveBusinessIds, promiseSaveCompanyMenuIds]).then(() => {
          this.$q.dialog({
            title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-53" ></i> 保存成功！</p>`,
            html: true,
            ok: {
              unelevated: true,
              label: '确认'
            }
          })
          this.isEdit = false
          this.getCompanyMenu()
        }).finally(() => {
          this.saveLoading = false
        })
      }
    },
    getSubmitData () {
      let menuList
      let result = []
      let ids = this.getIds()
      let data = this.getCurData()
      switch (this.tab) {
        case 'pc':
          menuList = Object.entries(this.Enums.SYS_PERMISSION)
            .map(item => item[1])
          for (let key in ids) {
            if (ids[key]) {
              result.push(Number(key))
              let item = data.find(i => {
                return i.value + '' === key
              })
              if (item.type === 'PAGE') {
                menuList.forEach(child => {
                  if (child.parentId + '' === key) {
                    result.push(child.value)
                  }
                })
              }
            }
          }
          break
        case 'mobile':
          menuList = Object.entries(this.Enums.SYS_PERMISSIONS_MOBILE)
            .map(item => item[1])
          menuList = this.addChildCount(menuList)
          for (let key in ids) {
            if (ids[key]) {
              let child = this.findChild1(Number(key), menuList)
              let childId = child.map(item => item.value)
              result.push(Number(key))
              result.push(...childId)
            }
          }
          break
        case 'pad':
          menuList = this.dataPad
          break
        case 'board':
          menuList = this.dataBoard
          break
      }
      // let result = []
      // let ids = this.getIds()
      // let data = this.getCurData()
      return result
    },
    addChildCount (data) {
      let info = data.map((item, index) => {
        // 找寻子级数量
        let children = data.filter(child => child.parentId === item.value)
        return {
          ...item,
          show: true,
          expand: true,
          index,
          childrenCount: children ? children.length : 0
        }
      })
      console.log(info)
      return info
    },
    // 切换toggle
    changeToggle (item, value) {
      let data = this.getCurData()
      let ids = this.getIds()
      let children
      if (item.parentId === null) {
        children = data.filter(child => child.parentId === item.value)
        children.forEach(child => {
          ids[child.value] = value
        })
      } else {
        let parent = data.find(child => child.value === item.parentId)
        children = data.filter(child => child.parentId === parent.value)
        if (value) {
          ids[parent.value] = value
        } else {
          let isAllFalse = true
          children.forEach(item => {
            if (ids[item.value]) {
              isAllFalse = false
            }
          })
          ids[parent.value] = !isAllFalse
        }
      }
      this.setIds(ids)
    },
    // 获取当前操作数据
    getCurData () {
      let data
      switch (this.tab) {
        case 'pc':
          data = this.dataPC
          break
        case 'mobile':
          data = this.dataPhone
          break
        case 'pad':
          data = this.dataPad
          break
        case 'board':
          data = this.dataBoard
          break
      }
      return data
    },
    setData (value) {
      switch (this.tab) {
        case 'pc':
          this.dataPC = value
          break
        case 'mobile':
          this.dataPhone = value
          break
        case 'pad':
          this.dataPad = value
          break
        case 'board':
          this.dataBoard = value
          break
      }
    },
    setLoading (value) {
      switch (this.tab) {
        case 'pc':
          this.pcLoading = value
          break
        case 'mobile':
          this.phoneLoading = value
          break
        case 'pad':
          this.padLoading = value
          break
        case 'board':
          this.boardLoading = value
          break
      }
    },
    // 设置ids的值
    setIds (ids) {
      switch (this.tab) {
        case 'pc':
          this.idsPC = ids
          break
        case 'mobile':
          this.idsPhone = ids
          break
        case 'pad':
          this.idsPad = ids
          break
        case 'board':
          this.idsBoard = ids
          break
      }
    },
    getIds () {
      let ids
      switch (this.tab) {
        case 'pc':
          ids = this.idsPC
          break
        case 'mobile':
          ids = this.idsPhone
          break
        case 'pad':
          ids = this.idsPad
          break
        case 'board':
          ids = this.idsBoard
          break
      }
      return ids
    },

    // FIXME 获取租户业务权限
    // FIXME 业务权限产品需求暂定四个 暂时写死，未来枚举采用bit-map方式重构时再做活
    getBusinessPermissionIds (idArr) {
      let businessPermissions = []
      // 客户端类型pc
      if (this.tab === 'pc') {
        // 若选中的菜单中包含pc加工工单
        if (idArr.includes(this.Enums.SYS_PERMISSION.WORK_ORDER_PAGE.value)) {
          // 向businessPermissions中push pc端读取个人加工工单、读取全部加工工单的枚举id
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_PC.READ_ALL_WORK_ORDERS.value)
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_PC.READ_OWNED_WORK_ORDERS.value)
        }

        // 若选中的菜单中包含pc质检工单
        if (idArr.includes(this.Enums.SYS_PERMISSION.QC_ORDER_PAGE.value)) {
          // 向businessPermissions中push pc端读取个人质检工单、读取全部质检工单的枚举id
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_PC.READ_ALL_QC_ORDERS.value)
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_PC.READ_OWNED_QC_ORDERS.value)
        }

        // 若选中的菜单中包含pcG-代码管理
        if (idArr.includes(this.Enums.SYS_PERMISSION.G_GOV_PAGE.value)) {
          // 向businessPermissions中push pc端读取个人权限和全部权限的枚举id
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_PC.READ_ALL_G_CODE.value)
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_PC.READ_OWNED_G_CODE.value)
        }
        // 客户端类型mobile
      } else if (this.tab === 'mobile') {
        // 若选中的菜单中包含mobile加工工单
        if (idArr.includes(this.Enums.SYS_PERMISSIONS_MOBILE.WORK_ORDER.value)) {
          // 向businessPermissions中push mobile端读取个人加工工单、读取全部加工工单的枚举id
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_MOBILE.READ_ALL_WORK_ORDERS.value)
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_MOBILE.READ_OWNED_WORK_ORDERS.value)
        }

        // 若选中的菜单中包含mobile质检工单
        if (idArr.includes(this.Enums.SYS_PERMISSIONS_MOBILE.QC_ORDER.value)) {
          // 向businessPermissions中push mobile端读取个人质检工单、读取全部质检工单的枚举id
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_MOBILE.READ_ALL_QC_ORDERS.value)
          businessPermissions.push(this.Enums.SYS_BUSINESS_PERMISSIONS_MOBILE.READ_OWNED_QC_ORDERS.value)
        }
      }

      return businessPermissions
    }
  },
  components: {
    Unfold
  }
}
</script>

<style scoped lang="stylus">
  .base-menu{
    .tab{
      /*min-height 36px*/
    }
    .box {
      display flex
      flex-direction column
      width 100%
      min-width 250px
      border-radius 6px
      overflow hidden
      height 100%

      .box-header {
        flex 40px 0
        padding 0 20px
        line-height 40px
        font-size 18px
        display flex
        align-items center
      }

      &.left {
        .box-content {
          flex 1
          padding-bottom 20px

          .role-item {
            padding-left 30px
            font-size 16px

            &.activated {
              background #cfd6fe
              color $primary
            }

            &:hover {
              background #e8ebff

              /deep/ .q-focus-helper {
                display none
              }
            }
          }

          .q-separator {
            margin-left 20px
            width calc(100% - 40px)
          }
        }
      }

      &.right {
        padding 0 20px
        .box-content {
          display flex
          flex-direction column
          flex 1
          padding-top 5px
          .toolbar{
            flex 36px 0
          }
          .tab-panel{
            flex calc(100vh - 218px) 0
            padding-top 20px
            .myTable-line {
              margin 0
            }
          }
        }
      }
    }
    /deep/ .fold .right-part {
      padding-top 0
    }
  }
</style>
<style lang='stylus'>
  .base-menu{
    .q-tab-panel{
      padding 0
    }
    .q-table__middle{
      max-height calc(100vh - 252px);
    }
  }
</style>
